import style from './StepsComponent.module.less';

export default function StepsComponent(props: any) {
    let width = Math.ceil(100 / props.titleList.length)
	return (
		<div className={style.StepsComponent}>
            <ul className={style.step_list}>
                {
                    props.titleList.map((value:any, index:number) => (
                        <li key={index} className={props.step === index + 1 ? style.step_active : ""} style={{width: `${width}%`}}>
                            <div className={style.step_line}>
                                <div className={style.step_icon}>{ index + 1 }</div>
                            </div>
                            <div className={props.step === index + 1 ? style.active : style.noActive}>
                                { value.title }
                            </div>
                        </li>
                    ))
                }
            </ul>
        </div>
	);
}